<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>

    <p><a href="https://echarts.baidu.com/tutorial.html">5 分钟上手 ECharts</a></p>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script src="./lib/echart/echarts.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // https://echarts.baidu.com/option.html#yAxis.interval
        var option = {
            grid: {
                containLabel: true,
                left: 0,
                right: 10,
                bottom: 30,
            },
            tooltip: {
                show: true,
            },
            xAxis: {
                type: 'category',

                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
                    '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],

                splitLine: {
                    show: true,
                    lineStyle: {
                        // color: 'rgb(237, 232, 249)',
                        color: 'rgb(0, 0, 249)', // x轴背景线颜色
                    },
                },

                axisTick: {
                    show: false,
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: true,
                    interval: 2,
                    lineStyle: {
                        // color: 'rgb(237, 232, 249)',// x轴背景线颜色
                        // color: 'rgb(0, 0, 249)', 
                    },
                },
                interval: 300,
                //min: 100,
                //max: 500,
                axisTick: {
                    interval: 3,
                },
            },
            series: [{
                data: [1820, 932, 1901, 2934, 1290, 1330, 320, 423, 1289, 2345, 2235, 3234, 3200, 234, 123, 1465, 67, 78, 435, 824, 354, 546, 446, 346, 46, 673, 36, 903, 2896, 3534],
                type: 'line',
                symbolSize: 8,
                itemStyle: {
                    borderWidth: 2,
                },
            }],
            visualMap: [
                {
                    show: false,
                    pieces: [{
                        gt: 0,
                        lt: 1800,
                        color: '#673CD1',
                    }, {
                        gte: 1800,
                        lt: 2800,
                        color: 'green',
                    }],
                    outOfRange: {
                        color: '#FF5D1D',
                    },
                },
            ],
        }

        myChart.setOption(option);



    </script>




</body>

</html>